<template>
  <el-main>
    <el-carousel
      direction="vertical"
      :autoplay="false"
      trigger="click"
      ref="carousel"
    >
      <el-carousel-item v-for="item in 3" :key="item"> </el-carousel-item>
    </el-carousel>
    <my-main-profile :pagePrev="prev" :pageNext="next"></my-main-profile>
  </el-main>
</template>

<script>
import MyMainProfile from "./MyMainProfile.vue";
export default {
  name: "MyMain",
  components: { MyMainProfile },
  methods: {
    prev() {
      this.$refs.carousel.prev();
    },
    next() {
      this.$refs.carousel.next();
    },
  },
};
</script>

<style lang="less" scoped>
.el-main {
  margin: 0;
  padding: 0;
  .el-carousel {
    height: calc(~"100vh - 60px");
    .el-carousel__container {
      height: calc(~"100vh - 60px");
      .el-carousel__item {
        height: calc(~"100vh - 60px");
        background-position: center center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        z-index: -2;
        &::before {
          content: "";
          width: 100%;
          height: 100%;
          filter: blur(4px);
          position: absolute;
          background: inherit;
          left: 0;
          top: 0;
          z-index: -1;
        }
      }
      .el-carousel__item:nth-of-type(1) {
        background-image: url("../assets/infinity-back-1.jpg");
      }
      .el-carousel__item:nth-of-type(2) {
        background-image: url("../assets/infinity-back-2.jpg");
      }
      .el-carousel__item:nth-of-type(3) {
        background-image: url("../assets/infinity-back-3.jpg");
      }
    }
  }
}
</style>